<template>
  <div>
    <view class="top-banner">
      <van-icon name="wap-home-o" size="72rpx" />
      <image src="../../static/image/logo.png" class="header"></image>
      <div class="cont">
        <van-icon name="search" size="72rpx"></van-icon>
        <van-icon name="shopping-cart-o" size="72rpx" />
      </div>
    </view>
    <div class="content">
      <div class="title">
        <image class="img" src="../../static/image/logoTitle.png"></image>
      </div>
      <van-button class="phoneBtn" type="danger" size="large">
        <van-icon class="phoneIcon" name="phone-o" size="60rpx" />手机号快捷登录
      </van-button>
      <van-button class="emailBtn" type="default" size="large">
        <van-icon class="emailIcon" name="comment-circle-o" size="60rpx" /><span class="text">邮箱账号登录</span>
      </van-button>
      <div class="band">
        <image class="icon" src="../../static/icon/wechat-fill.png"></image>
        <div class="bandName">微信&nbsp;|</div>
        <image class="icon" src="../../static/icon/qq.png"></image>
        <div class="bandName">QQ&nbsp;|</div>
        <image class="icon" src="../../static/icon/wb.png"></image>
        <div class="bandName">微博</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.top-banner {
  width: 750rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 0.5rpx solid #ccc;
}

.header {
  width: 140rpx;
  height: 40rpx;
  margin: 10rpx;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.title {
  width: 100%;
}

.title .img {
  margin-top: 140rpx;
  margin-bottom: 50rpx;
  width: 268rpx;
  height: 90rpx;
}

.phoneBtn {
  width: 670rpx;
  height: 94rpx;
  margin-bottom: 32rpx;

}

.phoneIcon,
.emailIcon {
  vertical-align: -20%;
}

.emailBtn {
  width: 666rpx;
  height: 92rpx;
  margin-bottom: 32rpx;
  border: 1px solid #f44;
}

.emailIcon,
.text {
  color: #f44
}

.icon {
  width: 40rpx;
  height: 40rpx;
}
.band{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 400rpx;
  /* background-color: red;  */
}
</style>